<template>
  <div class="page">
    <div class="breadcrumb">
      <span class="bc-item" v-for="(name,i) in breadcrumb" :key="i">{{ name }}</span>
    </div>
    <div class="page-title">问卷调查</div>
    <van-form ref="form">
      <div class="borderText">
        <van-field :disabled="userNumberDisable" :rules="telRules" required :border="true" v-model="wjdcData.userNumber" type="tel" label="用户号码" placeholder="用户号码"
                   label-width="40%"/>
      </div>
      <van-field required label="请问您对联通的产品是否满意" label-width="60%">
        <template #input>
          <div class="radio-wrap">
            <van-radio-group v-model="wjdcData.unicomProduct" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="2">否</van-radio>
            </van-radio-group>
          </div>
        </template>
      </van-field>
      <van-field required label="请问您对联通的服务是否满意" label-width="60%">
        <template #input>
          <div class="radio-wrap">
            <van-radio-group v-model="wjdcData.unicomService" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="2">否</van-radio>
            </van-radio-group>
          </div>
        </template>
      </van-field>
      <van-field required label="请问您使用语音业务是否满意" label-width="60%">
        <template #input>
          <div class="radio-wrap">
            <van-radio-group v-model="wjdcData.unicomVoice" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="2">否</van-radio>
            </van-radio-group>
          </div>
        </template>
      </van-field>
      <van-field required label="请问您使用手机上网是否满意" label-width="60%">
        <template #input>
          <div class="radio-wrap">
            <van-radio-group v-model="wjdcData.unicomMobile" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="2">否</van-radio>
            </van-radio-group>
          </div>
        </template>
      </van-field>
      <van-field required label="请问您使用短视频业务是否满意" label-width="60%">
        <template #input>
          <div class="radio-wrap">
            <van-radio-group v-model="wjdcData.unicomVideo" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="2">否</van-radio>
            </van-radio-group>
          </div>
        </template>
      </van-field>
      <van-field required label="请问您联通宽带是否满意" label-width="60%">
        <template #input>
          <div class="radio-wrap">
            <van-radio-group v-model="wjdcData.unicomNet" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="2">否</van-radio>
            </van-radio-group>
          </div>
        </template>
      </van-field>
      <van-field label="请问您使用手机游戏是否满意（年轻人）选填" label-width="60%">
        <template #input>
          <div class="radio-wrap">
            <van-radio-group v-model="wjdcData.unicomGame" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="2">否</van-radio>
            </van-radio-group>
          </div>
        </template>
      </van-field>
      <van-field required label="用户是否知道5G/Volte/VONR业务如何打开" label-width="60%">
        <template #input>
          <div class="radio-wrap">
            <van-radio-group v-model="wjdcData.unicom5g" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="2">否</van-radio>
            </van-radio-group>
          </div>
        </template>
      </van-field>
      <van-field required label="用户是否关注“广东联通”公众号" label-width="60%">
        <template #input>
          <div class="radio-wrap">
            <van-radio-group v-model="wjdcData.unicomWechat" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="2">否</van-radio>
            </van-radio-group>
          </div>
        </template>
      </van-field>
      <van-field required label="用户是否了解“手机报障”功能和使用方法" label-width="60%">
        <template #input>
          <div class="radio-wrap">
            <van-radio-group v-model="wjdcData.unicomFailure" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="2">否</van-radio>
            </van-radio-group>
          </div>
        </template>
      </van-field>
      <div class="borderText">
        <van-field
          v-model="wjdcData.unicomFeadback"
          rows="2"
          autosize
          label-width="80"
          label="用户反馈问题&意见建议"
          type="textarea"
          maxlength="500"
          placeholder="请输入留言"
          show-word-limit
        />
      </div>
    </van-form>
    <div v-if="finishFlag">
      <div style="margin: 16px; text-align: center">
        <div class="form-btn disabled" >当前小区任务已完成</div>
      </div>
    </div>
    <div v-else>
      <div style="margin: 16px; text-align: center">
        <div class="form-btn" @click="handleSubmit">提交问卷调查结果</div>
      </div>
      <div style="margin: 16px; text-align: center">
        <van-dialog
          v-model="deleteShow"
          title="删除问卷调查结果"
          show-cancel-button
          @cancel="deleteShow = false"
          @confirm="handleDelete"
        ></van-dialog>
        <div class="form-btn danger" v-if="wjdcId !== '' && wjdcId !== undefined && wjdcId !== null && this.type === '3'" @click="handleDeleteShow">删除问卷调查结果</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  submitWjdcResult,
  communityWjdcPercent, deleteWjdcResult, getCommunityInfo
} from '@/api/publicline/kdcs'
import { Toast} from 'vant'
import {geometry, getCurrentLocation} from "@/utils/geo";

export default {
  data() {
    return {
      userNumberDisable: false,
      finishFlag: false,
      deleteShow: false,
      wjdcId: '',
      communityId: '',
      breadcrumb: [],
      location: '',
      // 校验手机号码
      telRules: [{
        required: true,
        message: '手机号码不能为空',
        trigger: 'onBlur'
      }, {
        // 自定义校验规则
        validator: value => {
          return /^1[3456789]\d{9}$/.test(value)
        },
        message: '请输入正确格式的手机号码',
        trigger: 'onBlur'
      }],
      wjdcData: {
        id: '',
        villageId: '',
        userNumber: '',
        unicomProduct: '1',
        unicomService: '1',
        unicomVoice: '1',
        unicomMobile: '1',
        unicomVideo: '1',
        unicomNet: '1',
        unicomGame: '1',
        unicom5g: '1',
        unicomWechat: '1',
        unicomFailure: '1',
        unicomFeadback: ''
      },
      communityInfo: {}
    }
  },
  created() {
    const {communityId, breadcrumb, wjdcId, type} = this.$route.query
    this.communityId = communityId
    this.breadcrumb = breadcrumb.split('/')
    this.wjdcId = wjdcId
    this.type = type
    if(wjdcId !== '' && wjdcId !== undefined && wjdcId !== null) {
      this.searchWjdc()
    }
    this.getCommunityInfo()
    this.wjdcData.villageId = this.communityId
    getCurrentLocation( (info) => {
      this.location = info;
    }, () => {
      Toast.fail("当前定位获取失败")
    } )
  },
  methods: {
    getCommunityInfo() {
      getCommunityInfo( { VILLAGE_ID: this.communityId } )
        .then( res => {
          if ( res.success ) {
            const data = res.result.data;
            this.communityInfo = data;
            this.communityInfo.xqwl = JSON.parse(data.xqwl);
            if(data.state === '2') {
              this.finishFlag = true
            }
          }
        } )
    },
    searchWjdc() {
      communityWjdcPercent({ id: this.wjdcId })
        .then(
          res => {
            if (res.success) {
                this.userNumberDisable = (this.type === '1' || this.type === '2')
              const data = res.result
              this.wjdcData = data.list[0]
            }
          }
        )
    },
    handleSubmit() {
      const center = this.location
      let xqwl = []
      for ( const item of this.communityInfo.xqwl ) {
        xqwl.push( item.join(',') )
      }
      xqwl = xqwl.join(';')
      geometry(xqwl, center, 'distance', (distance) => {
        if ( distance < 100 ) {
          this.wjdcData = {
            ...this.wjdcData,
            type: this.type,
            LOCATION: this.location
          }
          this.$refs.form.validate().then(() => {
            submitWjdcResult( this.wjdcData )
              .then ( res => {
                if ( res.success ) {
                  const data = res.result;
                  Toast.success("问卷调查提交完成")
                  // 打卡成功
                  this.$router.go( -1)
                }
              } )
          }).catch(() => {
            this.$toast.fail('提交失败')
          })
        } else {
          Toast.fail('未到达小区范围，不允许提交结果');
        }
      })
    },
    handleDeleteShow() {
      this.deleteShow = true
    },
    handleDelete() {
      const center = this.location
      let xqwl = []
      for ( const item of this.communityInfo.xqwl ) {
        xqwl.push( item.join(',') )
      }
      xqwl = xqwl.join(';')
      geometry(xqwl, center, 'distance', (distance) => {
        if ( distance < 100 ) {
          deleteWjdcResult( {
            id: this.wjdcId,
            LOCATION: this.location
          } )
            .then ( res => {
              if ( res.success ) {
                Toast.success("问卷调查删除完成")
                // 打卡成功
                this.$router.go( -1)
              }
            } )
        } else {
          Toast.fail('未到达小区范围，不允许提交结果');
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.page {
  background: #FFF;

  .disabled {
    background: #EEE;
    color: #777;
    border-color: #ccc;
  }
}

.radio-wrap {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.page-title {
  font-size: 14px;
  padding: 10px 6px;
  text-align: left;
  display: flex;
  align-items: center;

  &:before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 20px;
    background: #008cff;
    margin-right: 8px;
  }
}

.breadcrumb {
  min-height: 20px;
  border-bottom: 1px solid #ccc;
  font-size: 13px;
  padding: 6px 10px;
  background: #f2f9ff;

  .bc-item {
    color: #888;

    &:after {
      content: " / ";
    }

    &:last-child {
      color: #000;

      &:after {
        content: "";
      }
    }
  }
}

.form-btn {
  padding: 10px 10px;
  border-radius: 4px;
  background: #008cff;
  color: #FFF;

  &.danger {
    background: #ff3700;
    color: #FFF;
  }
}

.borderText::v-deep .van-field--value {
  border: 1px solid red;
}
</style>